<template>
  <div class="auth-container">
    <div class="auth-card" style="width: 400px; padding: 40px;">
      <div class="auth-header">
        <div class="auth-logo">
          <el-icon><Lock /></el-icon>
        </div>
        <h1 class="auth-title">电子病历系统</h1>
      </div>
      
      <el-form 
        :model="loginForm" 
        class="auth-form"
        @submit.prevent="handleLogin"
      >
        <el-form-item>
          <el-input 
            v-model="loginForm.username" 
            placeholder="请输入用户名"
            prefix-icon="User"
            size="large"
          />
        </el-form-item>
        
        <el-form-item>
          <el-input 
            v-model="loginForm.password" 
            type="password" 
            placeholder="请输入密码"
            prefix-icon="Lock"
            show-password
            size="large"
          />
        </el-form-item>
        
        <el-form-item>
          <el-select 
            v-model="loginForm.role" 
            placeholder="请选择身份"
            size="large"
          >
            <el-option label="患者" value="patient" />
            <el-option label="医生" value="doctor" />
            <el-option label="管理员" value="admin" />
          </el-select>
        </el-form-item>
        
        <el-form-item>
          <el-button 
            type="primary" 
            class="auth-btn"
            native-type="submit"
            :loading="loading"
          >
            登录
          </el-button>
        </el-form-item>
      </el-form>
      
      <div class="link-text">
        <span>还没有账号？</span>
        <el-link type="primary" @click="$router.push('/register')">立即注册</el-link>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/store'
import { Lock } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const authStore = useAuthStore()
const router = useRouter()

const loginForm = ref({
  username: '',
  password: '',
  role: 'patient'
})

const loading = ref(false)

const handleLogin = async () => {
  // 验证输入
  if (!loginForm.value.username) {
    ElMessage.error('请输入用户名')
    return
  }
  
  if (!loginForm.value.password) {
    ElMessage.error('请输入密码')
    return
  }
  
  if (!loginForm.value.role) {
    ElMessage.error('请选择身份')
    return
  }
  
  loading.value = true
  
  try {
    // 直接调用authStore的login方法
    const success = authStore.login({
      username: loginForm.value.username,
      password: loginForm.value.password,
      role: loginForm.value.role
    })
    
    if (success) {
      router.push(`/dashboard/${loginForm.value.role}`)
    } else {
      ElMessage.error('用户名或密码错误')
    }
    
  } catch (error) {
    console.error('登录错误:', error)
    ElMessage.error('登录失败，请稍后再试')
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.auth-logo {
  width: 80px;
  height: 80px;
  margin: 0 auto 15px;
  background: #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-logo .el-icon {
  font-size: 36px;
  color: #00c0a5;
}

.auth-title {
  font-size: 24px;
  font-weight: 600;
  color: #000;
  margin: 0;
}

.auth-form {
  margin-bottom: 20px;
}

.auth-btn {
  width: 100%;
  height: 45px;
  font-size: 16px;
  background-color: #1e5799;
  border: none;
  transition: background-color 0.3s;
}

.auth-btn:hover {
  background-color: #163f70;
}
</style>